body {
background-color: #1d1f20;
min-height: 100vh;
display: grid;
place-content: center;
}
.folding-cube {
width: 4em;
height: 4em;
position: relative;
margin: auto;
transform: rotateZ(45deg);
}
.folding-cube .cube {
float: left;
width: 50%;
height: 50%;
position: relative;
transform: scale(1.1);
}
.folding-cube .cube::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #57fcff;
animation: folding-cube 2.4s infinite linear both;
transform-origin: 100% 100%;
}
.folding-cube .cube-2 {
transform: scale(1.1) rotateZ(90deg);
}
.folding-cube .cube-3 {
transform: scale(1.1) rotateZ(180deg);
}
.folding-cube .cube-4 {
transform: scale(1.1) rotateZ(270deg);
}
.folding-cube .cube-2::before {
animation-delay: 0.3s;
}
.folding-cube .cube-3::before {
animation-delay: 0.6s;
}
.folding-cube .cube-4::before {
animation-delay: 0.9s;
}
@keyframes folding-cube {
0%,
10% {
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}